<template>
	<div>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				询价清单以及要求
			</div>
			<div class="main-color">
				<el-row class="mt-[30px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">询价日期：</span>2023-05-23
							14:00:12
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">货物种类：</span>机械
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">运输方式：</span>海运
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">航线选择：</span>中国-北美
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">起运港：</span>上海
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">目的港：</span>北美
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">报价条款：</span>CFR
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span
								class="w-[120px] inline-block text-right mr-[10px]">货物描述：</span>AAAAAAAAAAAAAAAAAAAAAAA
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]"> HS编码：</span>84749000
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">柜形选择：</span>拼箱
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="!border-none p-4 mt-[30px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品信息
			</div>
			<el-table class="mt-[20px] border-inherit" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品编号" prop="scene_name" align="center">
					<template #default="{ row }">
						<el-button type="primary" link>
							<span class="main-color">0133</span>
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="产品名称" prop="type_desc" align="center" />
				<el-table-column label="总件数" prop="scene_name" align="center" />
				<el-table-column label="总毛重(kg)" prop="scene_name" align="center" />
				<el-table-column label="总体积(CBM)" prop="scene_name" align="center">
					<template #default="{ row }">
						1
					</template>
				</el-table-column>
				<el-table-column label="总托数" prop="scene_name" align="center">
					<template #default="{ row }">
						1
					</template>
				</el-table-column>
			</el-table>
			<div class="mt-[40px]">
				<el-table class="mt-[20px]" size="large" :data="lists"
					:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
					:cell-style="{'color':'#0054A6','padding':'20px 0'}">
					<el-table-column label="总件数" prop="type_desc" align="center" />
					<el-table-column label="总毛重(kg)" prop="scene_name" align="center" />
					<el-table-column label="总体积(CBM)" prop="scene_name" align="center" />
					<el-table-column label="总托数" prop="scene_name" align="center">
						<template #default="{ row }">
							1
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>
		<el-card class="!border-none p-4 mt-[30px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				报价
			</div>
			<div class="main-color">
				<el-row class="mt-[30px]">
					<el-col :span="6">
						<div class="flex-col">
							<span class=" mb-[10px]">报价条款</span>
							<el-select v-model="value" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">RMB费用</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class=" mb-[10px]">海运费USD</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">目的港费用合计</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col mt-[30px]">
							<span class=" mb-[10px]">报价有效期</span>
							<el-select v-model="value" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class=" mb-[10px]">海运费合计</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class=" mb-[10px]">船公司</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">航次</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col mt-[30px]">
							<span class=" mb-[10px]">航程</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
				</el-row>
				<div class="mt-[30px] ">
					<span class="mb-[10px]">上传截图</span>
					<el-upload class="avatar-uploader"
						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
						:show-file-list="false" :on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</div>
			</div>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]">
				<router-link :to="{
						path: getRoutePath('inquiry.inquiry/index')
				    }">
					<span>取消</span>
				</router-link>
			</el-button>
			<el-button class="w-[100px]  h-[36px]" color="#0054A6" type="primary">
				<router-link :to="{
						path: getRoutePath('inquiry.inquiry/index')
				    }">
					<span>保存</span>
				</router-link>
			</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	import type { UploadProps } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const value = ref('')
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
	const options = ref<Array<any>>([
		{
			value: '选项1',
			label: '黄金糕'
		}, {
			value: '选项2',
			label: '双皮奶'
		},
	])
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {

		return true
	}
</script>

<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #F7F7F7;
		margin-top: 10px;
	}
	.flex-col{
		display: flex;
		flex-direction: column;
	}
</style>